<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="header">
        <div class="header_left">
          <div class="logo">
            <img :src="logoUrl" alt="logo" />
          </div>
          <p class="system-name">Li·黯后台管理系统</p>
        </div>
        <!-- 导航栏右侧 -->
        <div class="header_right">
          <ul class="header_nav">
            <li>
              <i class="el-icon-refresh"></i>
              清空缓存
            </li>
            <li>
              <i class="el-icon-refresh"></i>
              标签手册
            </li>
            <li>
              <i class="el-icon-refresh"></i>
              帮助手册
            </li>
            <li>
              <i class="el-icon-refresh"></i>
              预览前台
            </li>
            <li>
              <i class="el-icon-refresh"></i>
              退出
            </li>
          </ul>
        </div>
      </div>
    </el-header>
    <!-- 头部 -->

    <el-container>
      <!-- 左侧导航 -->
      <!-- 
      :default-active="defauleRouter";
      设置路由跳转的选项
      -->
      <el-aside :width="menu_left_bg_width" :style="{height:`${asideHeight}px`}">
        <el-menu
          :default-active="defauleRouter"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border:0"
          :collapse="collapse"
          router
        >
          <el-menu-item index="#">
            <i class="el-icon-s-platform"></i>
            <span slot="title">基础设置</span>
          </el-menu-item>
          <el-submenu index="#">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>自定义块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/self-defined/classify">分类管理</el-menu-item>
              <el-menu-item index="/self-defined/content">内容管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/column">
            <i class="el-icon-location"></i>
            <span slot="title">栏目设置</span>
          </el-menu-item>
          <el-submenu index="#">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>内容设置</span>
            </template>
          </el-submenu>

          <el-submenu index="/SEO">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>SEO设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/SEO/SEOhome">首页SEO</el-menu-item>
              <el-menu-item index="/SEO/links">友情链接</el-menu-item>
              <el-menu-item index="/SEO/anchortext">站内锚文本</el-menu-item>
              <el-menu-item index="/SEO/map">站点地图</el-menu-item>
              <el-menu-item index="/SEO/url">URL重定向</el-menu-item>
              <el-menu-item index="/SEO/TAG">TAG管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/person">
            <i class="el-icon-s-custom"></i>
            <span slot="title">城市管理</span>
          </el-menu-item>

          <el-menu-item index="/leavemsg">
            <i class="el-icon-s-custom"></i>
            <span slot="title">留言管理</span>
          </el-menu-item>

          <el-menu-item index="/api_manage">
            <i class="el-icon-discount"></i>
            <span slot="title">API管理</span>
          </el-menu-item>
          <el-menu-item index="#">
            <i class="el-icon-discount"></i>
            <span slot="title">广告法禁用词</span>
          </el-menu-item>
          <el-menu-item index="#">
            <i class="el-icon-discount"></i>
            <span slot="title">运营推广</span>
          </el-menu-item>
          <el-menu-item index="#">
            <i class="el-icon-discount"></i>
            <span slot="title">系统管理</span>
          </el-menu-item>
          <el-menu-item index="#">
            <i class="el-icon-discount"></i>
            <span slot="title">授权管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 左侧导航 -->

      <!-- 右侧主体 -->
      <el-main :style="{height:`${asideHeight}px`}">
        <!-- 二级路由 -->
        <router-view></router-view>
      </el-main>
      <!-- 右侧主体 -->
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      logoUrl: "", //logo图片地址
      defauleRouter: window.location.pathname,
      collapse: false,
      icon_select: "el-icon-s-unfold",
      menu_left_bg_width: "200px",
      asideHeight: window.innerHeight - 60,
    };
  },
  methods: {
    // 菜单栏打开与收缩
    openMenu() {
      this.collapse = !this.collapse;
      this.collapse
        ? (this.icon_select = "el-icon-s-unfold")
        : (this.icon_select = "el-icon-s-fold");
      this.collapse
        ? (this.menu_left_bg_width = "69px")
        : (this.menu_left_bg_width = "200px");
    },
    // 设置密码
    setPwd() {
      window.location.href = "/setPwd";
    },
  },
  mounted() {
    window.onresize = () => {
      this.asideHeight = window.innerHeight - 60;
    };
  },
};
</script>

<style>
html,
body {
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.el-menu {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  height: 50px !important;
}
.el-header,
.el-footer {
  background-color: #0099cc;
  color: #fff;
}

.el-aside {
  background-color: #37424f;
  color: #333;
  transition: all 0.5s;
  overflow-y: scroll;
  overflow-x: hidden;
}
.element {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* 修改滚动条样式 */
.el-aside::-webkit-scrollbar {
  width: 4px;
}
.el-aside::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px #ffcf4b77;
  background: #ffd04b;
}
.el-aside::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #545c64;
  border-radius: 0;
  background: #545c64;
}
.el-main {
  background-color: #eaedf1;
  color: #333;
  padding: 0 !important;
}
.el-main::-webkit-scrollbar {
  width: 4px;
}
.el-main::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px #ffcf4b77;
  background: #ffd04b;
}
.el-main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #545c64;
  border-radius: 0;
  background: #545c64;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header_ico {
  cursor: pointer;
  margin-left: 10px;
  font-size: 25px;
}

.header_right span {
  margin: 0 5px;
  cursor: pointer;
}

/* herader */
.el-header {
  padding-left: 0px;
}
.header {
  height: 50px;
  font-size: 14px;
}
.header_right {
  height: 100%;
  display: flex;
  align-items: center;
}
.header_nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  list-style: none;
}
.header_nav li {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  align-items: center;
  padding: 0 5px;
}
.header_nav li:hover {
  background-color: burlywood;
}
.header_nav li i {
  margin: 0 10px;
}
.header_left {
  display: flex;
}
.logo,
.logo img {
  height: 50px;
  width: 50px;
  background-color: #0087b4;
  line-height: 60px;
}
.logo img {
  display: block;
}
.system-name {
  padding: 0 20px;
  font-size: 14px;
  line-height: 60px;
}
 .breadcrumb{
      height: 30px;
      background: #fff;
      padding: 0 25px 0;
      color: #2d2b2c;
    }
    .breadcrumb span{
      float: left;
      line-height: 30px;
    }
    .breadcrumb i{
      font-weight: 400;
      font-style: normal;
      line-height: 30px;
    }
    .Tform{
      margin: 30px 30px 0;
      background: #fff;
      padding: 15px 27px 20px;
      height: 100%;
    }
    .title {
    height: 45px;
    line-height: 44px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
   }
   .title span{
      padding-left: 15px;
      margin-left: 2px;
      border-left: 2px solid #88b7e0;
      color: #2d2b2c;
      height: 15px;
      line-height: 15px;
      display: inline-block;
      font-size: 14px;
   }
   
</style>